<template>
  <div>
    <ul>
      <li v-for="i in gdlist" :key="i.id" @click="togd(i.id)">
        <div class="cover">
          <img :src="i.coverImgUrl" alt="" />
          <span class="name">{{ i.name }}</span>
        </div>
        <span class="creator">{{i.creator.nickname}}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      gdlist: [],
    };
  },
  methods:{
    togd(id){
      this.$router.push({name:'songlist',query:{id:id}})
    }
  },
  mounted() {
    this.$request({
      url: "/search",
      params: {
        type: 1000,
        keywords: this.$route.query.keywords,
      },
    }).then((success) => {
      this.gdlist = success.data.result.playlists;
      console.log(this.gdlist);
    });
  },
};
</script>

<style scoped>
ul li {
  height: 120px;
  padding: 10px 10px;
  padding-right: 100px;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
ul li:nth-child(2n-1) {
  background-color: #f7f7f7;
}
li img {
  width: 100px;
  height: 100px;
  margin-right: 20px;
  border-radius: 10px;
  vertical-align: middle;
}

</style>